<template>
  <div>
    <!-- 信息栏 -->
    <Navbar />

    <!-- 通知栏 -->
    <van-notice-bar
      left-icon="volume-o"
      text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
    />

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in imgList" :key="index">
        <van-image :src="item.url" />
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
      </template>
    </van-swipe>

    <!-- 列表 -->
    <van-grid column-num="3" :border="false">
      <van-grid-item v-for="item in courseList" :key="item.id">
        <template #icon>
          <van-image width="50" height="50" :src="item.imgurl"></van-image>
        </template>
        <template #text>
          <h3>{{ item.title }}</h3>
        </template>
      </van-grid-item>
    </van-grid>

    <!-- 热门课程 -->
    <van-cell >
      <template #title>
        <h2>热门课程</h2>
      </template>
    </van-cell>
    <van-cell-group>
      <van-cell v-for="item in popularCourses" :key="item.id">
        <template #title>
          <h4>{{ item.title }}</h4>
        </template>
        <template #label>
          <p>{{ item.description }}</p>
        </template>
        <template #right-icon>
          <van-image width="80" height="80" :src="item.imgurl"></van-image>
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 底部导航栏 -->
    <Tabbar />
  </div>
</template>

<script setup>
import { ref } from "vue";
import pic1 from "../assets/img/pic1.jpg";
import pic2 from "../assets/img/pic2.jpg";
import pic3 from "../assets/img/pic3.jpg";
import pic4 from "../assets/img/pic4.jpg";
import courseVue from "../assets/img/1.jpg";
import coursePython from "../assets/img/2.jpg";
import courseJS from "../assets/img/3.jpg";
import courseJava from "../assets/img/4.jpg";
import courseHTML5 from "../assets/img/5.jpg";
import Navbar from  "../components/Navbar.vue";
import Tabbar from "../components/Tabbar.vue";

const imgList = ref([
  { url: pic1 },
  { url: pic2 },
  { url: pic3 },
  { url: pic4 },
]);
const courseList = ref([
  {
    id: 1,
    title: "Vue",
    imgurl: courseVue,
  },
  {
    id: 2,
    title: "Python",
    imgurl: coursePython,
  },
  {
    id: 3,
    title: "JavaScript",
    imgurl: courseJS,
  },
  {
    id: 4,
    title: "Java",
    imgurl: courseJava,
  },
  {
    id: 5,
    title: "HTML5",
    imgurl: courseHTML5,
  },
  {
    id: 6,
    title: "more",
    imgurl: "ellipsis"
  }
]);
const popularCourses = ref([
  {
    id: 1,
    title: "热门课程一",
    description: "这里是热门课程一的描述",
    imgurl: courseHTML5,
  },
  {
    id: 2,
    title: "热门课程二",
    description: "这里是热门课程二的描述",
    imgurl: courseHTML5,
  },
  {
    id: 3,
    title: "热门课程三",
    description: "这里是热门课程三的描述",
    imgurl: courseHTML5,
  },
]);
</script>

<style scoped>
.msgTitle {
  margin-left: 10px;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
  color: white;
}
</style>